/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-02 11:49:05
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 15:18:33
 */
import React from 'react';
import { Form, Input, Button, Space,Select,DatePicker } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

const {Option} = Select


// 选择日期
const { RangePicker } = DatePicker;
const rangeConfig = {
  rules: [
    {
      type: 'array',
      required: true,
      message: 'Please select time!',
    },
  ],
};


const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
/* eslint-disable no-template-curly-in-string */

// 默认提示信息

// const validateMessages = {
//   required: '${label} is required!',
//   types: {
//     email: '${label} is not a valid email!',
//     number: '${label} is not a valid number!',
//   },
//   number: {
//     range: '${label} must be between ${min} and ${max}',
//   },
// };
/* eslint-enable no-template-curly-in-string */

const SearchBox = () => {
  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <>
    <div style={{display:"flex",justifyContent:"space-around",border:"1px solid #E9EAEC",borderRadius:"5px"}}>
              {/* form 表单中间部分 */}
      <Form 
      {...layout}  
      name="nest-messages" 
      onFinish={onFinish} 
      // validateMessages={validateMessages} 
      style={{width:"25%"}} 
      initialValues={{
        'select':'0',
        }}>

      {/* 合作情况 */}
      <Form.Item
        name= 'select'
        label="合作情况"
        rules={[
          {
            // required: true,
          },
        ]}
      >
        <Select style={{ width: 120 }}>
          <Option value="0">请选择</Option>
          <Option value="1">已合作</Option>
          <Option value="2">未合作</Option>
        </Select>
      </Form.Item>

      {/* 电话 */}
      <Form.Item
        name='telephone'
        label="电话"
        rules={[
          {
            type: 'number',
          },
        ]}
      >
        <Input type='tel' />
      </Form.Item>

      {/* 微信 */}
      <Form.Item
        name='weiChat'
        label="微信"
        // rules={[
        //   {
        //     type: 'text',
        //     min: 0,
        //     max: 99,
        //   },
        // ]}
      >
        <Input type='text' />
      </Form.Item>
      <Form.Item name='website' label="网址">
        <Input />
      </Form.Item>
      <Form.Item name='range-picker' label="添加日期" {...rangeConfig}>
        <RangePicker locale={locale} />
      </Form.Item>

      </Form>

 {/* form 表单中间部分 */}
 
      <Form 
      {...layout} 
      name="nest-messages" 
      onFinish={onFinish} 
      // validateMessages={validateMessages} 
      style={{width:"25%"}}
      >

      {/* 供应商名称 */}
      <Form.Item
        name='provider'
        label="供应商名称"
        rules={[
          {
            // required: true,
          },
        ]}
      >
        <Input type='text' />
      </Form.Item>

      {/* 传真 */}
      <Form.Item
        name= 'fax'
        label="传真"
        // rules={[
        //   {
        //     type: 'email',
        //   },
        // ]}
      >
        <Input />
      </Form.Item>

      {/* qq */}
      <Form.Item
        name='qq'
        label="QQ"
        rules={[
          {
            type: 'number',
            min: 0,
            max: 99,
          },
        ]}
      >
        <Input />
      </Form.Item>

      {/* 省份 */}
      <Form.Item name= 'province' label="省份">
        <Input type='text' />
      </Form.Item>
      
      </Form>
{/* form 表单右侧部分 */}
 
      <Form 
      {...layout} 
      name="nest-messages" 
      onFinish={onFinish} 
      // validateMessages={validateMessages} 
      style={{width:"25%"}}
      >

      {/* 联系人 */}
      <Form.Item
        name= 'Contact'
        label="联系人"
        rules={[
          {
            // required: true,
          },
        ]}
      >
        <Input type='text' />
      </Form.Item>

      {/* 手机号 */}
      <Form.Item
        name= 'phone'
        label="手机号"
        rules={[
          {
            type: 'number',
            min: 0,
            max: 99
          },
        ]}
      >
        <Input  />
      </Form.Item>

      {/* 邮箱 */}
      <Form.Item
        name= 'email'
        label="邮箱"
        rules={[
          {
            type: 'email',
          },
        ]}
      >
        <Input />
      </Form.Item>

      {/* 城市 */}
      <Form.Item name= 'city' label="城市">
        <Input type='text' />
      </Form.Item>
     
      </Form>

    </div>


    {/* 底部清空 立即搜索按钮 */}

    <div style={{height:"50px",lineHeight:"50px",textAlign:"center"}}>
       <Space>
          <Button type='primary' size='large'>立即搜索</Button>
          <Button type='danger' size='large'>清空条件</Button>
       </Space>
    </div>

    </>
  );
};

export default SearchBox